Busca DevMedia
Você está buscando por "Single Page Application" em vídeo aula
- Pré-requisitos: SPA Vídeo
Se você ainda não sabe o que é uma SPA, ou Single-page Application, essa aula é perfeita para você.
- Introdução Vídeo
O Angular é um framework completo muito utilizado para o desenvolvimento web. Com ele podemos construir aplicações interativas do tipo Single-page application.
- Pré-requisitos: REST Vídeo
Sua Single-page Application ainda precisará de um back-end para regra de negócios e comunicação com banco de dados. Nessa aula conheceremos o REST, o padrão arquitetural que permite a comunicação da nossa SPA com o nosso back-end.
- Introdução - Minha Primeira Single Page Application com React - Vídeo 1 Vídeo
Neste curso desenvolveremos uma Single Page Application com React. Para isso aprenderemos a criar componentes, usar rotas e consumir web service RESTful.
- Criando os serviços de consultas e faturamento - Minha Primeira Single Page Application com React - Vídeo 19 Vídeo
Para finalizar o curso, resta apenas criar os serviços que servirão como auxiliares para os componentes Consultas e Faturamento. Neste vídeo criaremos então os arquivos consultas.js e faturamento.js na pasta services.
- Criando o serviço do resumo - Minha Primeira Single Page Application com React - Vídeo 18 Vídeo
A fim de remover dos componentes a lógica de consulta ao web service e responsabilidades como conversão dos dados recebidos, vamos criar serviços, que funcionarão como elementos auxiliares para os componentes.
- Centralizando a URL do web service - Minha Primeira Single Page Application com React - Vídeo 17 Vídeo
Atualmente estamos repetindo a URL do web service em todos os componentes que o consomem. Para evitar isso vamos criar um arquivo que exportará essa URL na forma de uma constante que poderá ser importada nos componentes.
- Adicionando os links das rotas - Minha Primeira Single Page Application com React - Vídeo 16 Vídeo
Adicionaremos agora os links na navbar para que possamos navegar com facilidade entre as rotas definidas anteriormente. Para isso usaremos o componente Link do pacote react-router-dom.
- Instalando o react-router-dom - Minha Primeira Single Page Application com React - Vídeo 14 Vídeo
Para trabalhar com rotas em uma aplicação React devemos instalar o pacote react-router-dom, que traz componentes que nos permitirão alternar entre as seções da aplicação de acordo com a URL.
- Criando o componente Faturamento - Minha Primeira Single Page Application com React - Vídeo 13 Vídeo
Criaremos agora o último componente: o Faturamento. Ele obterá seus dados do endpoint /faturamento e os exibirá em uma tabela com duas colunas.
- Definindo a interface das Consultas - Minha Primeira Single Page Application com React - Vídeo 12 Vídeo
Tendo criado o componente Consultas, definido seu state e como ele deve consumir o web service, podemos montar a estrutura de HTML e CSS na qual os dados das consultas devem ser exibidos.
- Criando o componente Consultas - Minha Primeira Single Page Application com React - Vídeo 11 Vídeo
Seguiremos agora o mesmo procedimento usado para criar o componente de Resumo e adicionaremos ao projeto o componente Consultas, que consumirá dados do endpoint /consultas.
- Definindo classes CSS dinamicamente - Minha Primeira Single Page Application com React - Vídeo 10 Vídeo
Da mesma forma que exibimos dados no HTML por meio de instruções JavaScript, também podemos definir classes CSS dinamicamente. Para isso, veremos como atribuir um valor à propriedade className de acordo com uma expressão condicional.
- Definindo a interface do resumo - Minha Primeira Single Page Application com React - Vídeo 8 Vídeo
Na interface gráfica do componente de resumo vamos usar o sistema de grid do Bootstrap, além de cards e tables. Esses elementos serão usados para exibir as informações para o usuário de forma clara e responsiva.
- Criando o componente Resumo - Minha Primeira Single Page Application com React - Vídeo 7 Vídeo
O componente Resumo, que será criado neste vídeo, obterá seus dados do endpoint /resumo do web service e exibirá informações a respeito das consultas e do faturamento da empresa.
- Exibindo o menu superior - Minha Primeira Single Page Application com React - Vídeo 5 Vídeo
Tendo criado o menu superior no vídeo passado, veremos agora como importar esse componente dentro do App.js e exibi-lo na página.
- Criando o menu superior - Minha Primeira Single Page Application com React - Vídeo 4 Vídeo
O menu superior será o primeiro componente do projeto. Ele utilizará o navbar do Bootstrap para exibir uma barra de navegação com links no topo da página.
- Configurando as rotas - Minha Primeira Single Page Application com React - Vídeo 15 Vídeo
Tendo instalado o pacote react-router-dom e adicionando o BrowserRouter no index.js, devemos agora definir onde os componentes serão renderizados quando cada rota for acessada. Isso será feito com usando as classes Switch e Route dentro do App.js.
- Obtendo dados do web service - Minha Primeira Single Page Application com React - Vídeo 9 Vídeo
Agora que temos a interface do componente pronta, vamos obter os dados do web service através de uma requisição HTTP GET. Para isso usaremos um método padrão dos componentes do React, o componentDidMount.
- Conhecendo o web service RESTful - Minha Primeira Single Page Application com React - Vídeo 6 Vídeo
Cada página da aplicação será representada por um componente que consome dados de um web service RESTful. Neste vídeo conheceremos a estrutura dos dados que serão retornados por cada um desses endpoints.
- Instalando o Bootstrap - Minha Primeira Single Page Application com React - Vídeo 3 Vídeo
O Bootstrap é um dos principais frameworks front-end do mercado. Ele tem como dependência a biblioteca jQuery e na versão 4 passou a depender também do Popper.js. Neste vídeo vamos ver como instalá-lo em uma aplicação React.
- Criando o projeto - Minha Primeira Single Page Application com React - Vídeo 2 Vídeo
O primeiro passo no desenvolvimento da aplicação será criar um novo projeto com a ferramenta de linha de comando create-react-app. Ela cria para nós uma estrutura de pastas e arquivos e configura alguns pacotes necessários de forma automática.
- Introdução - Minha primeira Single Page Application com Angular - Vídeo 1 Vídeo
Apresentamos nesta aula a aplicação em execução que construímos ao longo do curso. Trata-se de um Dashboard que apresenta um resumo das consultas marcadas, bem como do faturamento de uma clínica médica, em painéis.
- Ng serve - Minha primeira Single Page Application com Angular - Vídeo 5 Vídeo
Na última aula vimos que a aplicação foi iniciada com o comando ng serve e, com isso, conseguimos visualizar o componente App no navegador. Agora entenderemos o que aconteceu durante este processo.
- Empacotando a aplicação com o ng build - Minha primeira Single Page Application com Angular - Vídeo 25 Vídeo
Nossa aplicação está pronta. Veremos como gerar os arquivos para publicar em um servidor web com o comando ng build.